<template>
  <div class="cost-summary">
    <ProTable
      ref="qr_bank_card"
      :immediate="true"
      :request="queryBankCardPage"
      :search-form="formList"
      :columns="columns"
      :pagination="true"
      :before-search-submit="beforeSearchSubmit"
    >
    </ProTable>
  </div>
</template>

<script>
import ProTable from '@/components/ProTable';
import {omit} from 'lodash';

import {queryBankCardPage} from '@/api/order';

import { getDateRangeDate } from '@/utils/date'
import util from '@/utils/util'
import Authc from "@/components/Authc";

export default {
  name: 'BankCard',
  components: {
    ProTable,
    Authc
  },
  data() {
    return {
      formList: [
        {
          type: 'input',
          name: 'bankCode',
          label: '银行简码',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'select',
          name: 'accType',
          label: '卡类型',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [{value: '1',label: '借记卡'}, {value: '2',label: '贷记卡'}],
            clearable:false
          }
        },
        {
          type: 'select',
          name: 'activateStatus',
          label: '开通状态',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [{value: '0',label: '处理中'}, {value: '1',label: '用户已选卡，但未绑卡'}, {value: '2',label: '成功(开通绑卡成功)'}, {value: '3',label: '交易失败(开通绑卡失败)'}, {value: '4',label: '交易失败，sn失效'}, {value: '5',label: '已解绑'}, {value: '6',label: '交易失败(重复绑卡)'}],
            clearable:false
          }
        },
        {
          type: 'input',
          name: 'token',
          label: '支付标记',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'range',
          name: 'date',
          label: '创建时间',
          value: '',
          props: {
            placeholder: '请选择',
            format: 'yyyy年MM月dd日'
          }
        },
      ],
      columns: [
        {
          title: '用户姓名',
          width: 80,
          key: 'customerName'
        },
        {
          title: '开卡订单号',
          width: 180,
          key: 'flowId'
        },
        {
          title: '卡类型',
          key: 'charterCar',
          width: 80,
          align: 'center',
          render: (h, params) => {
            let item = params.row.accType==='1'||params.row.accType===1?'借记卡':'贷记卡';
            return h('span', item)
          }
        },
        {
          title: '银行',
          width: 100,
          key: 'bankName'
        },
        {
          title: '开卡状态',
          width: 160,
          key: 'activateStatus',
          render: (h, params) => {
            if (params.row.activateStatus === 0||params.row.activateStatus === 1 ) {
              return h('Tag', {props: {color: 'default'}}, params.row.activateStatus_name)
            }
            if (params.row.activateStatus === 2 ) {
              return h('Tag', {props: {color: 'success'}}, params.row.activateStatus_name)
            }
            return h('Tag', {props: {color: 'warning'}}, params.row.activateStatus_name)
          }
        },
        {
          title: '默认支付卡',
          key: 'is_default',
          width: 150,
          align: 'center',
          render: (h, params) => {
            let item = params.row.is_default==='1'||params.row.is_default===1?'是':'否';
            return h('span', item)
          }
        },
        {
          title: 'token',
          width: 185,
          key: 'token'
        },
        {
          title: '绑定时间',
          width: 150,
          key: 'binding_time'
        },
        {
          title: '创建时间',
          width: 150,
          key: 'createdDt'
        },

      ]
    };
  },
  computed: {

  },
  methods: {
    queryBankCardPage,
    exportExcelAll () {

    },
    exportExcel() {
    },
    beforeSearchSubmit(data) {
      const { date } = data
      const [startDate, endDate] = getDateRangeDate(date)
      console.log(startDate, endDate)
      if(startDate){
        data.createdDtBegin = util.formatDate(startDate)
      }
      if(endDate){
        data.createdDtEnd = util.formatDate(endDate)
      }
      return omit(data, 'date')
    },
  }
};
</script>
